<template>
  <div>
    <div>
      <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="80%"
      :showClose="false"
      >
      <div>
        <template>
          <el-table
            :data="tableData"
            :header-cell-style="{background:'#f5f5f5','text-align':'center'}"
              border
            style="width: 100%">
            <el-table-column
              prop="itemTag"
              label="测点标识"
              align="center">
            </el-table-column>
            <el-table-column
              prop="itemName"
              label="测点名称"
              align="center"
              width="130">
              <template #default="{row}">
                  <el-input size="mini" v-model="row.itemName"></el-input>
                </template>
            </el-table-column>
            <el-table-column
              prop="dataAddress"
              align="center"
              label="测点地址">
              <template #default="{row}">
                  <el-input size="mini" v-model="row.dataAddress"></el-input>
                </template>
            </el-table-column>
            <el-table-column
              prop="date"
              align="center"
              label="允许告警"
              width="100"
             >
             <template #default="{row}">
                <el-select v-model="row.enableAlarm" clearable    size="mini" style="margin-right: 10px;" >
                  <el-option class="select" label="是" :value="true"></el-option>
                  <el-option class="select" label="否" :value="false"></el-option>
                </el-select>
               </template>
            </el-table-column>
            <el-table-column
              prop="changedAlarm"
              label="值变告警"
              width="100"
              align="center">
              <template #default="{row}">
                <el-select v-model="row.changedAlarm"  clearable   size="mini" style="margin-right: 10px;" >
                  <el-option class="select" label="是" :value="true"></el-option>
                  <el-option class="select" label="否" :value="false"></el-option>
                </el-select>
               </template>
            </el-table-column>
            <el-table-column
              prop="holdAlarm"
              align="center"
              width="100"
              label="告警保持">
              <template #default="{row}">
                <el-select v-model="row.holdAlarm"  clearable   size="mini" style="margin-right: 10px;" >
                  <el-option class="select" label="是" :value="true"></el-option>
                  <el-option class="select" label="否" :value="false"></el-option>
                </el-select>
               </template>
            </el-table-column>
            <el-table-column
              prop="valueAlarmMask"
              label="告警值"
              width="130"
              align="center">
              <template #default="{row}">
                <el-select v-model="row.valueAlarmMask"   clearable    size="mini" style="margin-right: 10px;" >
                  <el-option class="select" v-for="(item,index) in gaojinlist" :key="index" :label="item.text" :value="+item.value"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column
              prop="eventLevel"
              label="告警等级"
              align="center"
              width="130">
              <template #default="{row}">
                <el-select v-model="row.eventLevel"    clearable   size="mini" style="margin-right: 10px;" >
                  <el-option class="select" v-for="(item,index) in xlalalists" :key="index" :label="item.text" :value="item.value"></el-option>
                </el-select>
               </template>
            </el-table-column>
            <el-table-column
              prop="eventType0"
              label="值0事件"
              align="center"
              width="140">
              <template #default="{row}">
                <el-select v-model="row.eventType0"    clearable   size="mini" style="margin-right: 10px;" >
                  <el-option class="select" v-for="(item,index) in xlalalist" :key="index" :label="item.text" :value="+item.value"></el-option>
                </el-select>
               </template>
            </el-table-column>
            <el-table-column
              prop="eventType1"
              label="值1事件"
              align="center"
              width="140">
             <template #default="{row}">
                <el-select v-model="row.eventType1"   clearable    size="mini" style="margin-right: 10px;" >
                  <el-option class="select" v-for="(item,index) in xlalalist" :key="index" :label="item.text" :value="+item.value"></el-option>
                </el-select>
               </template>
            </el-table-column>
            <el-table-column
              prop="dataEnum"
              label="数据枚举"
              align="left"
              width="130">
              <template #default="{row}">
                <span v-if="!Object.keys(row.dataEnum)[0]" @click="putmeiju(row)"><i class="el-icon-plus" style=" cursor: pointer;"></i></span>
                <div v-if="!Object.keys(row.dataEnum).length==0">
                    <span>{{Object.keys(row.dataEnum)[0]+':' }}</span>
                    <span style="margin-left: 5px;">{{ Object.values(row.dataEnum)[0] }}</span>
                    <span><i class="el-icon-edit" style="color: skyblue;margin: 0 5px; cursor: pointer; "></i></span>
                    <span @click="delmeiju(row,Object.keys(row.dataEnum)[0])"><i class="el-icon-delete" style="color: red; cursor: pointer;" ></i></span>
                  <span v-if="!Object.keys(row.dataEnum)[1]" style="margin-left: 5px; cursor: pointer;" @click="putmeiju(row)" ><i class="el-icon-plus"></i></span>
                </div>
                <div v-if="Object.keys(row.dataEnum)[1]" >
                  <span>{{Object.keys(row.dataEnum)[1]?Object.keys(row.dataEnum)[1]+':':'' }}</span>
                  <span style="margin-left: 5px;">{{ Object.values(row.dataEnum)[1]?Object.values(row.dataEnum)[1]:'' }}</span>
                  <span><i class="el-icon-edit" style="color: skyblue;margin: 0 5px;cursor: pointer; "></i></span>
                  <span @click="delmeiju(row,Object.keys(row.dataEnum)[1])"><i class="el-icon-delete" style="color: red; cursor: pointer;" ></i></span>
                  <span v-if="!Object.keys(row.dataEnum)[2]" style="margin-left: 5px; cursor: pointer;" @click="putmeiju(row)" ><i class="el-icon-plus"></i></span>
                </div>
                <div v-if="Object.keys(row.dataEnum)[2]" >
                    <span>{{Object.keys(row.dataEnum)[2]?Object.keys(row.dataEnum)[2]+':':'' }}</span>
                    <span style="margin-left: 5px;">{{ Object.values(row.dataEnum)[2]?Object.values(row.dataEnum)[2]:'' }}</span>
                    <span><i class="el-icon-edit" style="color: skyblue;margin: 0 5px;cursor: pointer; "></i></span>
                    <span @click="delmeiju(row,Object.keys(row.dataEnum)[2])"><i class="el-icon-delete" style="color: red; cursor: pointer;" ></i></span>
                    <span v-if="!Object.keys(row.dataEnum)[3]" style="margin-left: 5px;cursor: pointer; " @click="putmeiju(row)" ><i class="el-icon-plus"></i></span>
                </div>
                <div v-if="Object.keys(row.dataEnum)[3]" >
                    <span>{{Object.keys(row.dataEnum)[3]?Object.keys(row.dataEnum)[3]+':':'' }}</span>
                    <span style="margin-left: 5px;">{{ Object.values(row.dataEnum)[3]?Object.values(row.dataEnum)[3]:'' }}</span>
                    <span><i class="el-icon-edit" style="color: skyblue;margin: 0 5px;cursor: pointer; "></i></span>
                    <span @click="delmeiju(row,Object.keys(row.dataEnum)[3])"><i class="el-icon-delete" style="color: red; cursor: pointer;" ></i></span>
                    <span v-if="!Object.keys(row.dataEnum)[4]" style="margin-left: 5px;cursor: pointer; " @click="putmeiju(row)" ><i class="el-icon-plus"></i></span>
                </div>
                <div v-if="Object.keys(row.dataEnum)[4]" >
                    <span>{{Object.keys(row.dataEnum)[4]?Object.keys(row.dataEnum)[4]+':':'' }}</span>
                    <span style="margin-left: 5px;">{{ Object.values(row.dataEnum)[4]?Object.values(row.dataEnum)[4]:'' }}</span>
                    <span><i class="el-icon-edit" style="color: skyblue;margin: 0 5px;cursor: pointer; "></i></span>
                    <span @click="delmeiju(row,Object.keys(row.dataEnum)[4])"><i class="el-icon-delete" style="color: red; cursor: pointer;" ></i></span>
                    <span v-if="!Object.keys(row.dataEnum)[5]" style="margin-left: 5px;cursor: pointer; " @click="putmeiju(row)" ><i class="el-icon-plus"></i></span>
                </div>
                <div v-if="Object.keys(row.dataEnum)[5]" >
                    <span>{{Object.keys(row.dataEnum)[5]?Object.keys(row.dataEnum)[5]+':':'' }}</span>
                    <span style="margin-left: 5px;">{{ Object.values(row.dataEnum)[5]?Object.values(row.dataEnum)[5]:'' }}</span>
                    <span><i class="el-icon-edit" style="color: skyblue;margin: 0 5px;cursor: pointer; "></i></span>
                    <span @click="delmeiju(row,Object.keys(row.dataEnum)[5])"><i class="el-icon-delete" style="color: red; cursor: pointer;" ></i></span>
                    <span v-if="!Object.keys(row.dataEnum)[6]" style="margin-left: 5px;cursor: pointer; " @click="putmeiju(row)" ><i class="el-icon-plus"></i></span>
                </div>
                <div v-if="Object.keys(row.dataEnum)[6]" >
                    <span>{{Object.keys(row.dataEnum)[6]?Object.keys(row.dataEnum)[6]+':':'' }}</span>
                    <span style="margin-left: 5px;">{{ Object.values(row.dataEnum)[6]?Object.values(row.dataEnum)[6]:'' }}</span>
                    <span><i class="el-icon-edit" style="color: skyblue;margin: 0 5px;cursor: pointer; "></i></span>
                    <span @click="delmeiju(row,Object.keys(row.dataEnum)[6])"><i class="el-icon-delete" style="color: red; cursor: pointer;" ></i></span>
                    <span v-if="!Object.keys(row.dataEnum)[7]" style="margin-left: 5px;cursor: pointer; " @click="putmeiju(row)" ><i class="el-icon-plus"></i></span>
                </div>
                <div v-if="Object.keys(row.dataEnum)[7]" >
                    <span>{{Object.keys(row.dataEnum)[7]?Object.keys(row.dataEnum)[7]+':':'' }}</span>
                    <span style="margin-left: 5px;">{{ Object.values(row.dataEnum)[7]?Object.values(row.dataEnum)[7]:'' }}</span>
                    <span><i class="el-icon-edit" style="color: skyblue;margin: 0 5px;cursor: pointer; "></i></span>
                    <span @click="delmeiju(row,Object.keys(row.dataEnum)[7])"><i class="el-icon-delete" style="color: red; cursor: pointer;" ></i></span>
                    <span v-if="!Object.keys(row.dataEnum)[8]" style="margin-left: 5px;cursor: pointer; " @click="putmeiju(row)" ><i class="el-icon-plus"></i></span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <span  class="dialog">
          <button class="button" type="primary" @click="submit" style=" cursor: pointer;">确 定</button>
          <button @click="dialogVisible = false" style=" cursor: pointer;">取 消</button>
        </span>
    </el-dialog>
    </div>
    <div>
        <el-dialog
          :visible.sync="dialogVisibles"
          width="30%"
          :showClose="false"
          >
          <div>
            <el-form :rules="rule" :model="meiju">
              <el-form-item label="枚举值:" prop="enumValue" size="80" >
              <el-input v-model="meiju.enumValue" style="width: 250px;margin-top: 5px;margin-left: 15px;" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="枚举名称:" prop="enumName">
              <el-input v-model="meiju.enumName" style="width: 250px;margin-top: 5px;" size="mini"></el-input>
            </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <button class="button" type="primary" @click="xinmeiju" style=" cursor: pointer;">确 定</button>
            <button class="button neww" @click="dialogVisibles = false"  style=" cursor: pointer;">取 消</button>
          </span>
        </el-dialog>
      </div>
  </div>
</template>
<script>
import { getpicedianlistapi, getyaoxinxialaapi, putmeijuapi, delmeijuapi, postpiliangputapi, postpixiucedianapi,getyaoxinxialapi } from '@/api/measure'
import { getyanzhongapi } from '@/api/layout'
import { delmeijucedianapi, pustmeijucedianapi, putpiliangapi } from '@/api/device'
export default {
  name: 'MaintenanceYaoxin',
  props: {
    changeselect: {
      type: Array
    },
    flag: {
      type: String
    }
  },
  data () {
    return {
      dialogVisibles: false,
      dialogVisible: false,
      tableData: [],
      xlalalists: [],
      gaojinlist:[],
      row: {},
      meiju: {},
      rule: {
        enumValue: [
          { required: true, message: '枚举值必填', trigger: 'blur' }
        ],
        enumName: [
          { required: true, message: '枚举名称必填', trigger: 'blur' }
        ]
      }
    }
  },

  async mounted () {
    const res = await getyanzhongapi()
    this.xlalalists = res.data.list
    const ress = await getyaoxinxialaapi()
    this.xlalalist = ress.data.list
    const resss = await getyaoxinxialapi()
    console.log(resss);
    this.gaojinlist=resss.data.list
  },

  methods: {
    async getgetpicedianlist () {
      const arr = this.changeselect.map(ele => ele.id)
      if (this.flag) {
        const res = await postpixiucedianapi(arr)
        this.tableData = res.data.list
      } else {
        const res = await getpicedianlistapi(arr)
        this.tableData = res.data.list
      }
    },
    async putmeiju (row) {
      this.row = row
      this.dialogVisibles = true
    },
    async xinmeiju () {
      if (this.flag) {
        await pustmeijucedianapi({ ...this.meiju, id: this.row.id })
      } else {
        await putmeijuapi({ ...this.meiju, id: this.row.id })
      }

      this.dialogVisibles = false
      this.getgetpicedianlist()
      this.$message.success('添加成功')
      this.meiju = {}
    },
    async delmeiju (row, val) {
      console.log(row, val)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        if (this.flag) {
          await delmeijucedianapi({ enumValue: val, id: row.id })
        } else {
          await delmeijuapi({ enumValue: val, id: row.id })
        }
        this.getgetpicedianlist()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async submit () {
      if (this.flag) {
        await putpiliangapi(this.tableData)
      } else {
        await postpiliangputapi(this.tableData)
      }
      this.dialogVisible = false
      this.$message.success('修改成功')
      this.$emit('shuxing')
    }
  },
  watch: {
    dialogVisible (val) {
      if (val) {
        this.getgetpicedianlist()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog{
  display: inline-block;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
.dialog button{
  width:70px;
  height:30px;
  background-color:#fff;
  border-radius:5px;
  border:1px solid #ccc;
  margin-left:5px;
}
.button{
  background-color: #169bd5 !important;
  color: #fff;
}
.neww{
  margin: 0 90px 0 10px;
  background-color: #fff !important;
  color: black !important;
  border: 1px solid #ccc !important;
}
.button{
  width: 63px;
  height: 32px;
  border-radius: 3px;
  color: #fff;
  border: 1px solid #ccc;
  background-color: #1890ff;
}
</style>
